<template>
  <div>
    <header class="border-b bg-white/70 backdrop-blur-xl sticky top-0 z-50 shadow-sm" current-view="" user-profile="">
      <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between min-h-[40px]">
          <div class="flex items-center gap-4">
            <motion.div
              :whileHover="{ scale: 1.05 }"
              :whileTap="{ scale: 0.95 }"
              class="flex items-center"
            >
              <Button
                variant="ghost"
                size="sm"
                class="flex items-center gap-2 h-8 px-3 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200"
              >
                <Home class="w-4 h-4 flex-shrink-0" />
                <span class="leading-none">主页</span>
              </Button>
            </motion.div>
            <div class="h-5 w-px bg-slate-200 flex-shrink-0" />
            <h1 class="text-lg font-semibold bg-gradient-to-r from-slate-700 to-slate-900 bg-clip-text text-transparent leading-none flex items-center">
              {{
                currentView === 'dashboard' ? '数据面板' :
                  currentView === 'profile' ? '个人档案' :
                    currentView === 'ai-battle' ? 'AI对战模式' :
                      tests.find(t => t.id === currentView)?.title
              }}
            </h1>
          </div>
          <div class="flex items-center gap-3">
            <motion.div
              :whileHover="{ scale: 1.05 }"
              :whileTap="{ scale:  0.2}"

              class="flex items-center"
            >
              <Badge
                variant="secondary"
                class="flex items-center gap-1.5 h-8 px-3 bg-gradient-to-r from-orange-100 to-red-100 text-orange-700 border-orange-200 hover:shadow-sm transition-all duration-200"
              >
                <Flame class="w-3 h-3 flex-shrink-0" />
                <span class="leading-none whitespace-nowrap">
                    {{ calculateStreakDays(testResults) }} 天连续
                  </span>
              </Badge>
            </motion.div>
            <motion.div
              :whileHover="{ scale: 1.05 }"
              :whileTap="{ scale: 0.2 }"
              class="flex items-center"
            >
              <Badge
                variant="outline"
                class="flex items-center gap-1.5 h-8 px-3 bg-gradient-to-r from-purple-50 to-indigo-50 text-purple-700 border-purple-200 hover:shadow-sm transition-all duration-200"
              >
                <Star class="w-3 h-3 flex-shrink-0" />
                <span class="leading-none whitespace-nowrap">
                    等级 {{ 1 }}
                  </span>
              </Badge>
            </motion.div>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script setup>
import {computed} from 'vue'
import {Home, Flame, Star} from 'lucide-vue-next'
import { motion } from "motion-v"
import Badge from "~/components/badge.vue";
const props = defineProps({
  currentView: {
    type: String,
    required: true
  },
  activeTab: {
    type: String,
    default: 'tests'
  },
  testResults: {
    type: Array,
    default: () => []
  },
  userProfile: {
    type: Object,
    required: true
  },
  tests: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:currentView', 'update:activeTab'])

const headerTitle = computed(() => {
  return props.currentView === 'dashboard' ? '数据面板' :
    props.currentView === 'profile' ? '个人档案' :
      props.currentView === 'ai-battle' ? 'AI对战模式' :
        props.tests.find(t => t.id === props.currentView)?.title
})

const streakDays = computed(() => {
  return calculateStreakDays(props.testResults)
})

const currentComponent = computed(() => {
  return renderTestComponent()
})

const handleHomeClick = () => {
  emit('update:currentView', 'home')
  emit('update:activeTab', 'tests')
}

function calculateStreakDays(results) {
  // Implement your streak calculation logic
  return results.length > 0 ? results.length : 0
}

function renderTestComponent() {
  // Return the appropriate component based on currentView
  // Example: return resolveComponent('TestComponent')
  return 'div' // Default fallback
}
</script>
